import React from 'react';

import ReactDom from 'react-dom';

import uuid from 'uuid';

// const uuid = require('uuid').v1;

class DomUl extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
        this.state.list = props.list.map(str=>{return {key:uuid(),str}});

        // this.del = this.del.bind(this);
    }
    del(key){
        var delIndex;

        for(let i=0; i<this.state.list.length; i++){
            var item = this.state.list[i];
            if(item.key === key){
                delIndex = i;
                break;
            }
        }
        this.state.list.splice(delIndex,1);
        // this.setState({list:this.state.list});
        this.forceUpdate();
    }
    render(){
        let lis = this.state.list.map(item=><li onClick={()=>this.del(item.key)} key={item.key}>{item.str}</li>);
        return <ul>
            {lis}
        </ul>;
    }
}

const list = ['aaa1','bbb2','ccc3','ddd4'];

ReactDom.render(<DomUl list={list}/>, document.querySelector('#app'));
